<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
        }
        .box {
            border: 1px solid red;
            width:400px;
            height:300px;
        }
        .box .ctrl ul li{
            float: left;
            width:20%;
            cursor:pointer;
            text-align: center;
            height: 20px;
            line-height:20px;
            background: yellow;
        }
        .box .ctrl ul li.cur{
            border-bottom:none;
            background: yellowgreen;
        }
        .box .content ul li{
            display: none;
        }
        .box .content ul li.cur{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="ctrl">
            <ul>
                <li class="cur">产品1</li>
                <li>产品2</li>
                <li>产品3</li>
                <li>产品4</li>
                <li>产品5</li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li class="cur">产品内容1</li>
                <li>产品内容2</li>
                <li>产品内容3</li>
                <li>产品内容4</li>
                <li>产品内容5</li>
            </ul>
        </div>
    </div>
    <script>
        //拿到lis的集合
        var lis = document.querySelectorAll('.ctrl li');
        console.log(lis);
        lis.forEach(function(v,k){  //用forEach函数进行遍历，
            // console.log(1);
            v.addEventListener('click',function(){  //进入
                // console.log(1);
                var lis = document.querySelectorAll('.ctrl li');
                for(var i=0;i<lis.length;i++){
                    // lis[i].classname="";           //让lis的所有lis标签的classname为空
                    lis[i].classList.remove('cur');  //没进入for循环,lis没拿到集合
                    // console.log(2);
                }
                v.classname = 'cur';
                v.classList.add('cur');
                //对应内容
                var clis = document.querySelectorAll('.content li');
                for(var i=0;i<clis.length;i++){
                    // lis[i].classname="";           //让lis的所有lis标签的classname为空
                    clis[i].classList.remove('cur');  //没进入for循环,lis没拿到集合
                    console.log(2);
                }
                //对应内容的li的下标有k传来
                clis[k].classList.add('cur');
            })
        })
        //对应内容，拿到content的li集合
        
        //应该是ctrl的li触发的时间
        
    </script>

</body>
</html>